export default {
  name: 'Login',
  data () {
    return {
      // 关联用户在表单内填写的数据
      info: {},
      // 关联这个表单的验证规则
      loginRules: {
        // 这里的每一个成员是一个表单的验证规则
        // 这里和 el-form-item 标签的 prop 属性进行关联
        username: [
          // 一条一条的验证规则
          { required: true, message: '请填写用户名', trigger: 'change' },
          { min: 3, message: '最少输入三位字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'change' },
          { min: 3, message: '最少输入三位字符', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 表单重置事件处理函数
    resetHandler () {
      // 实现的需求, 就是重置表单
      // this.$refs 表示所有带有 ref 属性的组件的集合
      this.$refs.login.resetFields()
    },
    // 表单提交事件处理函数
    submitHandler () {
      // 验证表单是否按照规则填写好
      this.$refs.login.validate(async valid => {
        // valid 参数表示验证是否通过
        // 如果 valid 是 false, 直接 return
        // 提示一下用户表单填写有误
        if (!valid) {
          // 提示用户错误
          // element 提供的提示小消息
          this.$message({
            type: 'warning',
            message: '请按照规则完整填写表单',
            duration: 1500
          })
          return
        }

        // 代码来到这里, 说明按照规则填写的表单
        // 发送登录请求
        // 使用我们自己挂载的 this.$http this.$get this.$post 来发送请求
        const { data, meta } = await this.$post('login', this.info)

        // 通过请求返回的 data 和 meta 来决定后续操作
        if (meta.status === 400) {
          // 提示用户登录失败
          this.$message({
            type: 'error',
            message: '用户名或密码错误, 请重新登录',
            duration: 3000
          })
          return
        }

        // 代码执行到这里, 说明登录成功
        // 记得把 token 存储到 sessionStorage 内
        // 最好在存储一个 id
        window.sessionStorage.setItem('token', data.token)

        // 添加一个小提示
        this.$message({
          type: 'success',
          message: '登录成功, 即将跳转',
          duration: 1500
        })

        setTimeout(() => {
          // 跳转到 /home
          this.$router.push('/home')
        }, 1500)
      })
    }
  }
}
